<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('upload')" />
</head>

<body>

<!--  -->
<div class="container-fluid">
    <input id="btn1" type="button" value="userList" onclick="userList()"><br>
    <input id="btn2" type="button" value="userListByPage" onclick="userListByPage()"><br>
    <input id="btn3" type="button" value="search" onclick="search()"><br>
    <table id="table"></table>
    <!-- add or edit modal -->
    <div id="addOrEditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">
                    <form id="form0" name="form0" class="form-horizontal">
                        <div class="form-group">
                            <label for="username_id" class="col-sm-2 control-label">Username</label>
                            <div id="field__username__input" class="col-sm-10">
                                <input type="text" id="username_id" name="username" class="form-control" placeholder="index">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password_id" class="col-sm-2 control-label">Password</label>
                            <div id="field__password__input" class="col-sm-10">
                                <input type="text" id="password_id" name="password" class="form-control" placeholder="type">
                            </div>
                        </div>
                        <div class="form-group" data-oldvalue="21">
                            <label for="age_id" class="col-sm-2 control-label">Age</label>
                            <div id="field__age__input" class="col-sm-10">
                                <input type="text" id="age_id" name="age" class="form-control" placeholder="type">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -->

<th:block th:include="common/include :: footer" />
<script>
    function userList() {
        var url =ctx+"user/list";
        var jsonData={
            pageNo:1,
            pageSize:5,
            name:"userList"
        };
        var reqData=JSON.stringify(jsonData);
        $.ajax({
            url:url,
            data:reqData,
            type:"post",
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            success:function (data) {
                console.log("res:",data);
            },
            error:function (xhr, ajaxOptions, thrownError) {
                console.log("xhr:",xhr);
                console.log("ajaxOpt:",ajaxOptions);
                console.log("e:",thrownError);
            }
        });
    }
    function userListByPage() {
        var url = ctx+ "user/listByPage";
        var jsonData={
            pageNo:1,
            pageSize:5,
            name:"userListByPage"
        };
        var reqData=JSON.stringify(jsonData);
        $.ajax({
            url:url,
            data:reqData,
            dataType:"json",
            type:"post",
            contentType:"application/json;charset=utf-8",
            success:function (data) {
                console.log("res:",data);
            },
            error:function (xhr, ajaxOptions, thrownError) {
                console.log("xhr:",xhr);
                console.log("ajaxOpt:",ajaxOptions);
                console.log("e:",thrownError);
            }
        });
    }
    var $table = $("#table");// 用户表格
    function search() {
        // refresh refreshOptions
        $table.bootstrapTable("refreshOptions",{
            pageNumber:1,
            pageSize:10,
            queryParams:function (params) {
                var d = {
                    offset :params.offset,// SQL语句起始索引
                    limit : params.limit,  // 每页显示数量
                    name:'searchLjw'
                };
                return JSON.stringify(d);
            }
        });

    }
    function initBootstrapTable() {
        $table.bootstrapTable({
            url:ctx+ "user/listByPage",
            method: "post",
            contentType:"application/json;charset=utf-8",
            dataField:"data", // 数据field ,默认是 rows字段映射 数据
            totalField:"totalRecordsCount", // 总数量 field, 默认是total字段映射 总数
            striped : true, //是否显示行间隔色
            pagination : true,//是否分页
            sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageNumber : 1, //初始化加载第一页
            pageSize : 10,//单页记录数
            pageList : [ 5, 10, 20],//可选择单页记录数
            queryParams : function(params) {//上传服务器的参数
                console.log(JSON.stringify(params));
                var temp = {
                    offset :params.offset,// SQL语句起始索引
                    limit : params.limit  // 每页显示数量
                };
                return JSON.stringify(temp);
            },columns: [{
                title: 'No',
                align: 'center',
                formatter: function (value, row, index) {
                        var options = $table.bootstrapTable('getOptions');
                        return options.pageSize * (options.pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'id', title: 'id', align: 'center'
                }, {
                    field: 'name', title: 'name', align: 'center'
                }, {
                    field: 'email', title: 'email', align: 'center'
                },{ title: 'operate', field: 'id', align:'center',
                    formatter: function (value, row, index) {
                        var html = '<a href="javascript:editItem('+ value + ')">Edit</a>';
                        html += "&nbsp|&nbsp";
                        html += '<a href="javascript:deleteItem(' + value + ')">Delete</a>';
                        return html;
                    }
                }]
        })
    }
    function editItem(obj) {
        console.log("editItem"+obj);
        $('#addOrEditModal').modal('show')
    }
    function deleteItem(obj){
        console.log("deleteItem"+obj);
    }
    $(function () {
        initBootstrapTable();
    });
</script>
</body>
</html>